<template>
  <div>

    <el-row style="background-color: #fff">
      <el-button type="primary" size="mini" @click="dialogFormVisible = true"><b>+</b>&nbsp;&nbsp;添加</el-button>
      <el-button type="text"><i class="el-icon-bottom"></i>导入</el-button>
      <el-button type="text"><i class="el-icon-top"></i>导出</el-button>
      <el-button type="text" @click="handleDeleteBatch"><i class="el-icon-delete"></i>删除</el-button>
      <!--此下拉框用于搜索-->
      <el-select clearable filterable placeholder="请选择要筛选的产品属性" v-model="selectedValue"
                 @change="selectProducts" size="small">
        <el-option
            v-for="item in options"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictLabel">
        </el-option>
      </el-select>
    </el-row>

    <el-dialog title="产品分类" :visible.sync="dialogFormVisible">
      <el-row style="color: #1a3bd7">
        <b>产品分类</b>
        <el-progress :percentage="100" :show-text="false"></el-progress><!-- :format="format"--><!--水平线-->
      </el-row>
      <el-form :model="productCategory" style="margin-top: 60px">
        <el-row :gutter="20">
          <el-col :span="10">
            <b>产品类型</b>
          </el-col>
          <el-col>
            <el-form-item>
              <el-input size="small" v-model="productCategory.productType" autocomplete="off"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <b>产品属性</b>
          </el-col>
          <el-col>
            <el-select v-model="productCategory.productAttribute" placeholder="请选择" clearable size="small">
              <el-option
                  v-for="item in options"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictLabel">
              </el-option>
            </el-select>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">提交</el-button>
      </div>
    </el-dialog>
    <el-table
        ref="multipleTable"
        :data="productCategorys"
        tooltip-effect="dark"
        style="width: 100%;margin-top: 5px"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <!--    <el-table-column-->
      <!--        label="日期"-->
      <!--        width="120">-->
      <!--      <template slot-scope="scope">{{ scope.row.date }}</template>-->
      <!--    </el-table-column>-->
      <el-table-column
          prop="productAttribute"
          label="产品属性"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productType"
          label="产品类型"
          width="120">
      </el-table-column>
      <el-table-column
          prop="enterPerson"
          label="提交人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="enterTime"
          label="提交时间"
          width="180"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <!--        <span> {{ $dayjs(scope.row.enterTime).format('YYYY-MM-DD HH:mm:ss') }}</span>-->
          <span v-if="scope.row && scope.row.enterTime && scope.row.enterTime !== ''">
  {{ $dayjs(scope.row.enterTime).format('YYYY-MM-DD HH:mm:ss') }}
</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          show-overflow-tooltip>
        <template slot-scope="scope">
        <span v-if="scope.row && scope.row.updateTime && scope.row.updateTime !== ''">
  {{ $dayjs(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
</span>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
export default {
  name: "productCategoryView",
  data() {
    return {
      optionsLoaded: false, // 新增，表示options数据是否已加载完成
      productCategorys: [],
      dialogFormVisible: false,
      multipleSelection: [],//批量删除
      productCategory: {
        productType: '',
        enterPerson: "",
        productAttribute: "",
      },
      options: [],//产品属性下拉框
      selectedValue: "",//当前选择要查询的产品属性
      formLabelWidth: '120px'
    }
  },
  // watch: {
  //   // 监听 productCategory.productAttribute 的变化
  //   'productCategory.productAttribute'(newVal) {
  //     this.selectedValue = newVal;
  //   }
  // },
  methods: {
    /*钩子函数  初始化产品分类*/
    getProductCategory() {
      this.$axios.get("manage/productCategory/list").then(response => {
        this.productCategorys = response.data.data;
      });
    },
    handleAdd() {
      this.$axios.post("manage/productCategory/add", this.productCategory).then(response => {
        this.dialogFormVisible = false;
        this.$message.success("添加成功");
        this.getProductCategory();
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 根据产品属性查询
    async selectProducts(value) {
      if (!value) {
        // 当用户清除选择时重新获取数据
        this.getProductCategory();
      }
      if (value == "") {
        this.getProductCategory()
      }
      const response = await this.$axios.get("manage/productCategory/selectProducts", {
        params: {dataType: value}
      });
      this.productCategorys = response.data.productCategorys || [];
    },
    /*批量删除*/
    handleDeleteBatch() {
      let ids = this.multipleSelection.map(productCategorys => productCategorys.id);
      if (ids.length > 0) {
        this.$confirm('此操作将永久删除该条例, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("要删除的ids:" + ids)
          this.$axios.post("manage/productCategory/deleteBatch", ids).then(response => {
            this.dialogVisible = false;
            this.$message.success("删除成功")
            this.productCategorys = this.productCategorys.filter(productCategory => !ids.includes(productCategory.id))
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      } else {
        this.dialogVisible = false;
        this.$message.error("请选择要删除的条例")
      }
    },
    /*获取产品属性下拉框信息*/
    getCategoryOption() {
      this.$axios.get("manage/productCategory/getProductCategoryOption").then(response => {
        this.options = response.data.data
      });
    }
  }, created() {
    this.getProductCategory();
    this.getCategoryOption();//获取产品属性分类
    this.productCategory.enterPerson = JSON.parse(window.localStorage.getItem("form")).username
  }

}
</script>
<style scoped>

</style>